<template>
    <div class="iamfe">
        <div class="nav-text">
            <p>当前位置：首页></p>
        </div>
        <div class="newslist">
    <div class="list">
            <ul class="shows">
<li>
    <a target="" href="/news/detail/?Id=1088">
        <h3>2025年第二季度健康风险管理师（RHM）全国统一考试报名通知</h3>
        <div class="news_content">
            <img src="http://igaas.cn/upload/news/images/2025040309282884.png" alt="2025年第二季度健康风险管理师（RHM）全国统一考试报名通知">
            <div class="con_right">
                <p>2025年第二季度健康风险管理师（RHM）全国统一考试报名通知</p>
                <div>
                    <span></span>
                    <span></span>
                    <span>2025年04月03日&nbsp;09:31</span>
                </div>
            </div>
        </div>
    </a>
</li>
<li>
    <a target="" href="/news/detail/?Id=1087">
        <h3>2025年第二季度康养规划师（CPH）认证全国统一考试报名通知</h3>
        <div class="news_content">
            <img src="http://igaas.cn/upload/news/images/2025040309282884.png" alt="2025年第二季度康养规划师（CPH）认证全国统一考试报名通知">
            <div class="con_right">
                <p>2025年第二季度康养规划师（CPH）认证全国统一考试报名通知</p>
                <div>
                    <span></span>
                    <span></span>
                    <span>2025年04月03日&nbsp;09:27</span>
                </div>
            </div>
        </div>
    </a>
</li>
       
    </ul>

    </div>
<div class="pagelist">
    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage"
    @current-change="handelCurrentChange" :total="total" />
</div>
 
</div>
    </div>
</template>
 
<script setup lang="ts">
  const total=ref<number>(0)
    const currentPage=ref<number>(1) 
        function handelCurrentChange(pageNum: number) { 
}
</script>
<style scoped lang='less'>
.iamfe {
    margin: 10px 0;
    width: 100%;
    // min-height: 100%;
    height: fit-content;
    

    .nav-text {
        width: 1300px;
        margin: 0 auto 15px;

        p {
            font-size: 14px;
            padding: 15px 10px 15px 20px;
            position: relative;
        }

        &::after {
            content: "";
            background-color: #efe7e7;
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
        }
    }

    .iamfe-content {
        width: 1300px;
        height: calc(100% - 45px);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        >ul {
            width: 200px;
            height: 434px;

            li {
                font-size: 16px;
                padding: 10px 20px !important;

                >p {
                    font-size: 16px;
                }
            }

            >li:first-child {
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                padding: 20px 0;
                background: #00499D;
                font-size: 14px;
                color: #ffffff;
                cursor: pointer;
            }

            >li:not(:first-child) {
                display: flex;
                align-items: center;
                background: #F1F5F9;
                padding: 0 20px;
                font-size: 14px;
                cursor: pointer;
            }

            >li:not(:last-child) {
                margin-bottom: 8px;

            }
        }

    }
}
 
/* clear float */
.cf {
  zoom: 1;
}
/* for IE */
.cf:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
/* for other */
/* end of clear float */
/* float */
.left {
  float: left;
}
.right {
  float: right;
}
.fnone {
  float: none;
}
.middle {
  float: left;
}
/* text-align */
.tleft {
  text-align: left;
}
.tright {
  text-align: right;
}
.tcenter {
  text-align: center;
}
/* display */
.dis {
  display: block;
}
.undis {
  display: none;
}
/*å¸¸ç”¨å­—å·*/
/* åœ†è§’  */
/*è¾¹æ¡†åœ†è§’*/
/*å•è¡Œè½½æ–­*/
/*å•è¡Œè½½æ–­æº¢å‡ºçœç•¥å·*/
/*3è¡Œè½½æ–­æº¢å‡ºçœç•¥å·*/
/* é¢åŒ…å±‘ */
.crumb {
  display: none;
}
 
 
.pa100 {
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/*å¸¸ç”¨é¢œè‰²*/
/* æ¿å—ç‰ˆå¿ƒè®¾ç½® */
html,
body {
  background-color: #f8f9fb;
}
.banner img {
  min-height: 36px;
}
.breadcrumb {
  max-width: 1200px;
  width: 96%;
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
  color: #999;
  margin: 19px auto 22px;
}
.breadcrumb a {
  color: #999;
}
.breadcrumb a:last-child {
  color: #333;
}
.newslist {
  max-width: 1173px;
  width: 96%;
  margin: 0 auto;
  padding: 0;
  margin-bottom: 50px;
}
.newslist .ols {
  margin-bottom: 30px;
}
.newslist .ols ol {
  width: 366px;
  *zoom: 1;
  zoom: 1;
}
.newslist .ols ol:after {
  content: " ";
  clear: both;
  display: table;
}
.newslist .ols ol li {
  float: left;
  width: 112px;
  height: 48px;
  line-height: 48px;
  background-color: #fff;
  text-align: center;
  font-size: 16px;
  margin-right: 15px;
}
.newslist .ols ol li a {
  display: block;
  color: #999;
}
.newslist .ols ol li:hover,
.newslist .ols ol li.current {
 // background-color: #345aa3;
}
.newslist .ols ol li:hover a,
.newslist .ols ol li.current a {
  color: #fff;
}
.newslist .ols ol li:last-child {
  margin-right: 0;
}
@media (max-width: 768px) {
  .newslist .ols ol li {
    width: 96px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
  }
}
.newslist .list {
  padding-left: 3px;
  margin-bottom: 20px;
}
.newslist .list ul {
  display: -webkit-box;
  /* iOS 6-, Safari 3.1-6 */
  display: -webkit-flex;
  /* Chrome */
  display: -moz-box;
  /* Firefox 19 */
  display: -ms-flexbox;
  display: flex;
  /*flexå®¹å™¨*/
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  flex-wrap: wrap;
}
.newslist .list ul li {
  max-width: 570px;
  width: 100%;
  margin-bottom: 20px;
  background-color: #fff;
}
.newslist .list ul li a {
  display: block;
  padding: 39px 40px 52px 39px;
}
.newslist .list ul li h3 {
  font-size: 22px;
  font-weight: bold;
  line-height: 24px;
  color: #333;
  height: 24px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.newslist .list ul li .news_content {
  display: flex;
  margin-top: 17px;
}
.newslist .list ul li .news_content > img {
  width: 179px;
  height: 118px;
  border-radius: 8px;
}
.newslist .list ul li .news_content .con_right {
  position: relative;
  max-width: 311px;
  width: 100%;
  padding-left: 13px;
}
.newslist .list ul li .news_content .con_right p {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 22px;
  color: #666;
  overflow: hidden;
  display: -webkit-box;
  word-break: break-all;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.newslist .list ul li .news_content .con_right > div {
  line-height: 16px;
  font-size: 0;
}
.newslist .list ul li .news_content .con_right > div span {
  font-size: 14px;
}
.newslist .list ul li .news_content .con_right > div span:nth-of-type(1) {
  color: #ccc;
}
.newslist .list ul li .news_content .con_right > div span:nth-of-type(2) {
  display: inline-block;
  height: 16px;
  border-left: 1px solid #eee;
  margin: 0 15px;
  vertical-align: -3px;
}
.newslist .list ul li .news_content .con_right > div span:nth-of-type(3) {
  color: #999;
}
.newslist .list ul li:hover {
  box-shadow: 0px 2px 16px 0px rgba(52, 90, 163, 0.1);
}
.newslist .list ul li:hover h3 {
  color: #345aa3;
}
.newslist .pagelist {
  text-align: center;
  font-size: 0;
  display: flex;
    justify-content: center;
  
}
.newslist .pagelist input {
  width: 42px;
}
.newslist .pagelist input.number {
  padding: 0;
}
.newslist .pagelist span,
.newslist .pagelist input {
  display: inline-block;
  vertical-align: middle;
  min-width: 42px;
  height: 42px;
  line-height: 40px;
  font-size: 16px;
  color: #999;
  text-align: center;
  background-color: #ffffff;
  border: solid 1px #e5e5e5;
  cursor: pointer;
  margin-left: 10px;
}
.newslist .pagelist span a,
.newslist .pagelist input a {
  display: block;
  color: #999;
}
.newslist .pagelist span.on,
.newslist .pagelist input.on {
 // background-color: #345aa3;
}
.newslist .pagelist span.on a,
.newslist .pagelist input.on a {
  color: #fff;
}
.newslist .pagelist span.next,
.newslist .pagelist input.next,
.newslist .pagelist span.prev,
.newslist .pagelist input.prev {
  width: 78px;
}
.newslist .pagelist span.jump,
.newslist .pagelist input.jump {
  background-color: #f6f6f6;
  border: solid 1px #e5e5e5;
}
@media (max-width: 640px) {
  .newslist .pagelist span,
  .newslist .pagelist input {
    display: none;
  }
  .newslist .pagelist span.prev,
  .newslist .pagelist input.prev,
  .newslist .pagelist span.next,
  .newslist .pagelist input.next,
  .newslist .pagelist span.number,
  .newslist .pagelist input.number {
    display: inline-block;
    height: 35px;
    line-height: 33px;
    font-size: 14px;
  }
  .newslist .pagelist span.next,
  .newslist .pagelist input.next,
  .newslist .pagelist span.prev,
  .newslist .pagelist input.prev {
    width: 60px;
  }
}
.newslist .pagelist span:hover {
  background-color: #345aa3;
  color: #fff;
}
.newslist .pagelist span:hover a {
  color: #fff;
}
@media (max-width: 1207px) {
  .newslist .list {
    padding-left: 0;
  }
  .newslist .list ul.shows {
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .newslist {
    margin-bottom: 30px;
    /*  padding-bottom: 50px;
      margin-bottom: 50px;
      .list {
        ul {
          li {
            .news_img {
              height: 100px;
            }
            .con_right {
              width: 60%;
              p {
                margin-top: 10px;
              }
              a {
                width: 100px;
                height: 35px;
                line-height: 33px;
              }
            }
          }
        }
      } */
  }
  .newslist .list {
    margin-bottom: 10px;
  }
  .newslist .list ul li {
    max-width: 508px;
  }
  .newslist .list ul li a {
    padding: 25px;
  }
  .newslist .list ul li h3 {
    font-size: 18px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .newslist .list ul li .news_content > img {
    width: auto;
    height: 100px;
  }
  .newslist .list ul li .news_content .con_right p {
    overflow: hidden;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .newslist .list ul li .news_content .con_right > div {
    line-height: normal;
  }
  .newslist .list ul li .news_content .con_right > div span {
    font-size: 12px;
  }
  .newslist .list ul li .news_content .con_right > div span:nth-of-type(2) {
    height: 14px;
    margin: 0 10px;
  }
  /* .newslist {
      width: 100%;
      padding-left: 14px;
      .ols {
        overflow-x: scroll;
        &::-webkit-scrollbar {
          width: 0px;
          height: 0px;
        }
        ol {
          width: 540px;
          li {
            width: 96px;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
          }
        }
      }
      .list {
        ul {
          li {
            h5 {
              padding-right: 60px;
              .ellipsis();
            }
            .news_content {
              .news_img {
                width: 135px;
                height: 90px;
              }
              .con_right {
                p {
                  .spill4();
                  height: 100%;
                  margin: 0;
                }
                >div {
                  display: none;
                }
              }
            }
          }
        }
      }
    } */
}
@media (max-width: 500px) {
  .newslist .list ul li a {
    padding: 20px;
  }
  .newslist .list ul li .news_content > img {
    height: 70px;
  }
  .newslist .list ul li .news_content .con_right {
    padding-left: 10px;
  }
  .newslist .list ul li .news_content .con_right p {
    margin-bottom: 15px;
  }
}

</style>